//加载公共样式
require('../../assets/css/index.less')
//axios
const request = require('../../utils/request')
//字体图标
require('../../assets/fonts/iconfont.css')

// weui
require('../../lib/weui/weui.css')
let weui = require('../../lib/weui/weui.js')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

//加载自己的样式
require('./personal.less')

window.onload = () => {
    const nickNameVal =document.querySelector('#nickNameVal')
    const back = document.querySelector('#back')
    const changeImg = document.querySelector('#changeImg')
    const fileUp = document.querySelector('#fileUp')
    const headimg = document.querySelector('.headimg')
    const sex = document.querySelector('#sex')
    const sexVal = document.querySelector('#sexVal')
    const birth = document.querySelector('#birth')
    const birthVal = document.querySelector('#birthVal')
    const province = document.querySelector('#province')
    const provinceVal = document.querySelector('#provinceVal')
    const city = document.querySelector('#city')
    const cityVal = document.querySelector('#cityVal')
    const info = document.querySelector('#info')
    const num = document.querySelector('#num')
    //点击返回
    back.addEventListener('click', function () {
        location.href = './my.html'
    })

    //点击头像
    changeImg.addEventListener('click', function () {
        fileUp.click()
    })
    let headImg = '';
    //上传头像
    fileUp.addEventListener('change', function () {
        let pc = this.files[0]
        let pd = new FormData()
        pd.append('file', pc)
        request.post('/api/circles/uploadImg', pd).then(res => {
            console.log(res);
            let { errno, data } = res.data
            if (errno == 0) {
                console.log(data.url);
                changeImg.src = API + data.url
                headimg = data.url
            }
        })
    })

    //性别
    let sexN;
    sex.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            // 选中触发事件
            onConfirm: function (result) {
                console.log(result);
                console.log('性别', result[0].label);
                //把选中的值添加到页面中
                sexVal.innerHTML = result[0].label
                //保存到全局
                sexN = result[0].value;
            },
            title: '请选择性别'
        });
    })

    //生日
    birth.addEventListener('click', function () {
        weui.datePicker({
            start: 1890,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let birth = result.map(function (v) {
                    // console.log(v.value);
                    return v.value < 10 ? "0" + v.value : v.value
                }).join('-')
                birthVal.innerHTML = birth;
            },
            title: '请选择生日'
        });
    })

    //省份
    let prodata;  //储存省份
    let cityId;  //储存城市
    //省份选择
    province.addEventListener('click', function () {
        request.get('api/shared/province').then(res => {
            console.log(res);
            let { errno, data } = res.data
            if (errno == 0) {
                data = data.map(v => {
                    // console.log(v);
                    return {
                        label: v.name,
                        value: v.id,
                    }
                })
                weui.picker(data, {
                    onConfirm: function (result) {
                        console.log(result[0]);
                        provinceVal.innerHTML = result[0].label
                        prodata = result[0].value
                        //城市
                        request.get(`/api/shared/city?provinceId=${prodata}`).then(res => {
                            console.log(res);
                            let { errno, data } = res.data
                            if (errno == 0) {
                                console.log('城市', data);
                                let cityData = data.map(v => {
                                    // console.log(v);
                                    return {
                                        label: v.name,
                                        value: v.id,
                                    }
                                })
                                cityVal.innerHTML = cityData[0].label
                                cityId = cityData[0].value
                            }
                        })
                    },
                    title: '请选择省份'
                })
            }
        })

    })
    //城市选择
    city.addEventListener('click', function () {
        if (prodata) {
            request.get(`/api/shared/city?provinceId=${prodata}`).then(res => {
                console.log(res);
                let { errno, data } = res.data
                if (errno == 0) {
                    data = data.map(v => {
                        // console.log(v);
                        return {
                            label: v.name,
                            value: v.id,
                        }
                    })
                    weui.picker(data, {
                        onConfirm: function (result) {
                            // console.log(result);
                            cityVal.innerHTML = result[0].label
                            cityId = result[0].value
                        },
                        title: '请选择城市'
                    })
                }
            })
        }
    })

    //个人简介字符
    info.addEventListener('input', function () {
        let len = this.value.length
        if (len > 199) {
            this.value = this.value.slice(0, 200)
        }
        num.innerHTML = this.value.length
    })


    //保存修改的数据
    saveBtn.addEventListener('click', function () {
        request.post('/api/user/changeInfo', {
            imgUrl: headImg,
            nickName: nickNameVal.value,
            gender: sexN,
            birthday: birthVal.innerText,
            provinceId: prodata,
            cityId: cityId,
            sign: info.value,
        }).then(res => {
            console.log(res);
            let { errno, data } = res.data
            if (errno == 0) {
                let data = localStorage.getItem('userInfo')
                data.imgUrl = (headImg == '' || headImg == null) ? data.imgUrl : headImg
                data.nickName = nickNameVal.value;
                data.gender = sexN;
                data.birthday = birthVal.innerText;
                data.provinceId = prodata;
                data.cityId = cityId;
                data.sign = info.value;
                localStorage.setItem('userInfo', data)
                setInterval(function () {
                    location.href = './my.html'
                }, 1000)
            }
        })
    })

    //省份回填
    function getProvince(provinceId) {
        request.get('api/shared/province').then(res => {
            console.log(res);
            let { errno, data } = res.data
            if (errno == 0) {
                data.forEach(function (v, i) {
                    // console.log(v.id);
                    if (v.id == provinceId) {
                        provinceVal.innerHTML = v.name
                    }
                })
            }
        })
    }
    // getProvince()

    //城市
    function getCity(provinceId, cityId) {
        request.get(`/api/shared/city?provinceId=${provinceId}`).then(res => {
            console.log(res);
            let { errno, data } = res.data
            if (errno == 0) {
                data.forEach(v => {
                    if (v.id == cityId) {
                        cityVal.innerHTML = v.name
                    }
                })
            }
        })
    }

    //获取个人信息
    function getUserInfo() {
        let data = JSON.parse(localStorage.getItem('userInfo'));
        console.log(data);
        getProvince(data.provinceId);
        getCity(data.provinceId, data.cityId);
        changeImg.src = API + data.imgUrl;
        nickNameVal.value = data.nickName;
        sexVal.innerHTML = (data.gender == 0 ? '男' : '女');
        birthVal.innerHTML = data.birthday ?? '请选择生日';
        info.innerHTML = data.sign;
    }
    getUserInfo()

}